<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/navbar.css">
    <link rel="stylesheet" href="../css/question_bank.css">
    <link rel="stylesheet" href="../css/layui.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="navbar">
        <div class="left">
            <a href="/">首页</a>
            <a href="/all_questions.html">编程题库</a>
        </div>
        <div class="center">
            <a href="/html/job_seek.html">求职</a>
            <a href="/html/learning.html">学习</a>
            <a href="/html/discuss.html">讨论</a>
            <a href="/html/question_bank.html">知识题库</a>
            <a href="/html/ai_qa.html">AI问答</a>
        </div>
        <div class="right">
            <a href="/html/register.html">注册</a>
            <a href="/html/login.html">登录</a>
            <a href="/html/userInfo.html" class="toRight">个人信息</a>
        </div>
    </div>

    <!-- 主内容 -->
    <main>
        <div class="box">
            <!-- 编程主题轮播图 -->
            <div class="container-carousel">
                <div class="layui-card">
                    <div class="layui-card-body card-body-carousel">
                        <div class="layui-carousel" id="ID-carousel-demo-image">
                            <div carousel-item>
                                <div><img src="/resource/image/coding.jpg" alt="代码编辑器"></div>
                                <div><img src="/resource/image/programmer.jpg" alt="编程语言"></div>
                                <div><img src="/resource/image/coding2.jpg" alt="在线编译器"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 热门功能 -->
            <div class="new-div">
                <div class="layui-card hot">
                    <span class="title">热门功能</span><span class="logo"> Hot</span>
                    <span class="new-title">新品首发</span><span class="new-logo"> New</span>
                    <div class="text"><span># 算法挑战</span><span class="new-text"># 在线编译    </span></div>
                    <div class="text"><span># 数据结构训练</span><span class="new-text-02"># AI 编程助手   </span></div>
                    <div class="text"><span># 编程语言测试</span><span class="new-text"># 项目实战挑战    </span></div>
                    <div class="text"><span># 代码重构练习</span><span class="new-text-02"># 代码提交分析    </span></div>
                </div>
            </div>

            <!-- 功能卡片 -->
            <div class="container-assessment">
                <div class="layui-card">
                    <div class="layui-card-body card-body-assessment">
                        <div class="layui-row layui-col-space30">
                            <div class="layui-col-md3">
                                <div class="assessment-card">
                                    <h3>算法挑战</h3>
                                    <p>解决精选算法问题，提升编程技能。</p>
                                    <button onclick="startAlgorithmChallenge()">开始挑战</button>
                                </div>
                            </div>
                            <div class="layui-col-md3 left-shift">
                                <div class="assessment-card">
                                    <h3>编程语言测试</h3>
                                    <p>测试您对不同编程语言的掌握程度。</p>
                                    <button onclick="startLanguageTest()">开始测试</button>
                                </div>
                            </div>
                        </div>
                        <div class="layui-row layui-col-space30">
                            <div class="layui-col-md3">
                                <div class="assessment-card">
                                    <h3>数据结构训练</h3>
                                    <p>通过系列题目掌握数据结构的核心应用。</p>
                                    <button onclick="startDataStructureTraining()">开始训练</button>
                                </div>
                            </div>
                            <div class="layui-col-md3 left-shift">
                                <div class="assessment-card">
                                    <h3>项目实战</h3>
                                    <p>参与项目实战，获取真实开发经验。</p>
                                    <button onclick="startProjectPractices()">开始实战</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script src="../js/layui.js"></script>
    <script src="../js/question_bank.js"></script>
</body>
</html>
